<template>
  <div id="environment"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      myChart: "",
    };
  },
  mounted() {
    // this.setEcharts();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 880;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    // 绘制图表、
    setEcharts() {
      this.myChart = this.$echarts.init(document.getElementById("environment"));

      var data_val = [
          2220, 1682, 2791, 3000, 4090, 3230, 2910, 2220, 1682, 2791, 3000,
          4090, 3230, 2910,
        ],
        xAxis_val = [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
        ];
      var data_val11 = [
        220, 182, 271, 300, 90, 230, 210, 220, 62, 71, 30, 90, 80, 29,
      ];
      var data_val2 = [
        120, 162, 291, 320, 40, 330, 20, 220, 62, 91, 360, 70, 330, 210,
      ];
      var data_val1 = [0, 0, 0, 0, 0, 0, 0];
      var option = {
        legend: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 40,
          },
        },
        // backgroundColor: "#293042",
        grid: {
          top: "10%",
          left: "0%",
          bottom: "5%",
          right: "13%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "#000000",
          textStyle: {
            fontSize: 55, // 字体大小
            color: "#fff",
          },
          // formatter: (e) => {
          //   // console.log(e);
          //   let str = e.name + "月 \n   " + e.value + "次";
          //   return str;
          // },
        },

        xAxis: {
          data: xAxis_val,
          name: "单位: 时",
          nameGap: 30,
          nameTextStyle: {
            color: "#fff",
            fontSize: 40,
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
              color: "#fff", // x轴颜色
              fontWeight: "normal",
              fontSize: 38,
              // lineHeight: 22,
            },
            interval: 0, //标签设置为全部显示
            margin: 15,
            // lineHeight: 15,
          },
          axisTick: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        yAxis: {
          ayisLine: {
            show: false,
          },
          axisLabel: {
            // formatter: "{value}%",
            textStyle: {
              color: "#fff",
              fontSize: 40,
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },

        series: [
          {
            type: "line",
            name: "二氧化碳",
            smooth: true,
            symbolSize: 15,
            animation: false,
            lineWidth: 1.2,
            hoverAnimation: false,
            data: data_val,
            symbol: "circle",
            lineStyle: {
              normal: {
                //主线
                width: 5,
                color: "#01f8f3",
                shadowColor: "#000",
                shadowBlur: 15,
                shadowOffsetY: 5,
              },
            },
            itemStyle: {
              normal: {
                color: "#01f8f3",
                borderWidth: 3,

                borderColor: "#fff",
                label: {
                  show: false,
                  position: "top",
                  textStyle: {
                    fontSize: 40,
                    fontWeight: "700",
                    color: "#fff",
                  },
                },
              },
            },

            areaStyle: {
              normal: {
                color: "#06efec",
                opacity: 0.08,
              },
            },
          },
          {
            type: "line",
            name: "温度",
            smooth: true,
            symbolSize: 15,
            animation: false,
            lineWidth: 1.2,
            hoverAnimation: false,
            data: data_val11,
            symbol: "circle",
            lineStyle: {
              normal: {
                //主线
                width: 5,
                color: "#fffd38",
                shadowColor: "#000",
                shadowBlur: 15,
                shadowOffsetY: 5,
              },
            },
            itemStyle: {
              normal: {
                color: "#fffd38",
                borderWidth: 3,

                borderColor: "#fff",
                label: {
                  show: false,
                  position: "top",
                  textStyle: {
                    fontSize: 40,
                    fontWeight: "700",
                    color: "#fff",
                  },
                },
              },
            },

            areaStyle: {
              normal: {
                color: "#fffd38",
                opacity: 0.08,
              },
            },
          },
          {
            type: "line",
            name: "湿度",
            smooth: true,
            symbolSize: 15,
            animation: false,
            lineWidth: 1.2,
            hoverAnimation: false,
            data: data_val2,
            symbol: "circle",
            lineStyle: {
              normal: {
                //主线
                width: 5,
                color: "#a0c0fd",
                shadowColor: "#000",
                shadowBlur: 15,
                shadowOffsetY: 5,
              },
            },
            itemStyle: {
              normal: {
                color: "#a0c0fd",
                borderWidth: 3,

                borderColor: "#fff",
                label: {
                  show: false,
                  position: "top",
                  textStyle: {
                    fontSize: 40,
                    fontWeight: "700",
                    color: "#fff",
                  },
                },
              },
            },

            areaStyle: {
              normal: {
                color: "#a0c0fd",
                opacity: 0.08,
              },
            },
          },
        ],
      };

      this.myChart.setOption(option);
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
      this.setEcharts();
    },
  },
};
</script>

<style scoped lang="less">
#environment {
  width: 1712px;
  height: 880px;
  padding: 50px 40px;

  box-sizing: border-box;
  // background: rgba(0, 0, 0, 0.6);
  // background: url(../../assets/方框底图.png) 0 0 no-repeat;
  // background-size:100% 100%;
}
</style>
